<template>
  <div class="app-container">
    <div class="filter-container">
      
<el-row>
  <el-col :span="20">
    
      <el-form ref="filterForm" :model="filterForm" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="主力合约" prop="localSymbol">
          <el-select v-model="filterForm.localSymbol" filterable placeholder="请选择" @change="handleFilter">
            <el-option
            v-for="item in symbolOptions"
            :key="item.code"
            :label="item.fullname"
            :value="item.code">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="filterForm.keyword" clearable placeholder="合约" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="行情" prop="quote">
            <el-radio-group v-model="filterForm.quote" @input="handleFilter">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">关闭</el-radio-button>
              <el-radio-button label="2">开启</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="交易" prop="trade">
            <el-radio-group v-model="filterForm.trade" @input="handleFilter">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">关闭</el-radio-button>
              <el-radio-button label="2">开启</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="subscribeStatus" @input="handleFilter">
            <el-radio-group v-model="filterForm.subscribeStatus">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">已取消</el-radio-button>
              <el-radio-button label="2">正常</el-radio-button>
            </el-radio-group>
        </el-form-item>
      </el-form>

  </el-col>
  <el-col :span="4" style="text-align:right;">
            <el-button type="text" @click="getList()" >搜索</el-button>
            <el-button @click="hiddenDepositWrapper=true;" >新合约</el-button>

  </el-col>
</el-row>
    </div>
      
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
    <el-table-column
     label="编号"
      type="index"
      width="50">
    </el-table-column>
      <el-table-column label="合约" min-width="150px">
        <template slot-scope="{row}">
          <span @click="handleDetail(row)">{{ row.symbol }}</span>
          
          <el-tag
            effect="danger" v-if="row.direction == 1">
            看多
          </el-tag>
                  <el-tag
            effect="success" v-else-if="row.direction == 2">
            看空
          </el-tag>
                  <el-tag
            effect="info" v-else>
            未明确
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="周期" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.scale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="策略" min-width="150px">
        <template slot-scope="{row}">
          <div>趋势：{{ row.ema }}-{{ row.wma }}</div>
          <div>随机摆动：{{ row.fast }}-{{ row.slow }}-{{ row.signal }}</div>
        </template>
      </el-table-column>
      <el-table-column label="行情" width="150px">
        <template slot-scope="{row}">
          <el-switch
            v-model ="row.quote"
            @change="handleSubscribeQuoteChange(row,$event)"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="交易" width="150px">
        <template slot-scope="{row}">
          <el-switch
            v-model ="row.trade"
            @change="handleSubscribeTradeChange(row,$event)"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="有效期" width="240px">
        <template slot-scope="{row}">
          <span>{{ row.beginDate }}-{{row.endDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="150px">
        <template slot-scope="{row}">
          <el-tag type="success" effect="dark" v-if="row.status == 2">开启</el-tag>
          <el-tag type="info" effect="dark" v-if="row.status == 1">关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.updatedAt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200px">
        <template slot-scope="{row}">
            <el-button v-if="row.status == 2" type="text" @click="handleSubscribeCannel(row)" >取消</el-button>
            <el-button @click="handleSubscribeRemove(row)" >删除</el-button>
            <el-button @click="handleSubscribeChange(row)" >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />


    <el-dialog
      title="新合约"
      :visible.sync="hiddenDepositWrapper"
      :close-on-click-modal="false"
      width="50%">
      <el-form ref="filterForm" :model="subscribeForm"  label-position="left" label-width="100px">
        <el-form-item label="合约" prop="symbol">
          <el-input v-model="subscribeForm.symbol" placeholder="合约" />
        </el-form-item>
        <el-form-item label="周期" prop="scale">
            <el-radio-group v-model="subscribeForm.scale">
              <el-radio-button label="1">M1</el-radio-button>
              <el-radio-button label="3">M3</el-radio-button>
              <el-radio-button label="5">M5</el-radio-button>
              <el-radio-button label="10">M10</el-radio-button>
              <el-radio-button label="15">M15</el-radio-button>
              <el-radio-button label="30">M30</el-radio-button>
              <el-radio-button label="60">H1</el-radio-button>
              <el-radio-button label="120">H2</el-radio-button>
              <el-radio-button label="240">H4</el-radio-button>
              <el-radio-button label="1440">D1</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="行情" prop="quote">
            <el-radio-group v-model="subscribeForm.quote">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="2">关闭</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="趋势" prop="trend">
          <el-input style="width:20%;" v-model="subscribeForm.ema" placeholder="短期" />
          <el-input style="width:20%;" v-model="subscribeForm.wma" placeholder="长期" />
        </el-form-item>
        <el-form-item label="随机摆动" prop="kdj">
          
          <el-input style="width:20%;" v-model="subscribeForm.fast" placeholder="快线" />
          <el-input style="width:20%;" v-model="subscribeForm.slow" placeholder="慢线" />
          <el-input style="width:20%;" v-model="subscribeForm.signal" placeholder="信号线" />
        </el-form-item>
        <el-form-item label="交易" prop="trade">
            <el-radio-group v-model="subscribeForm.trade">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="2">关闭</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期">
           <el-date-picker
            v-model="subscribeForm.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
            </el-date-picker>
            -
           <el-date-picker
            v-model="subscribeForm.endDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hiddenDepositWrapper = false;depositForm.amount=100">取 消</el-button>
        <el-button type="primary" @click="handleSubscribeSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//import { getFaultinessList,  removeFaultinessByID, changeFaultinessStatusByID } from '@/api/development/faultiness'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getSymbolList} from '@/api/knowledge/symbol'
import {getSubscribeList,subscribeSave,subscribeTradeSubmit,subscribeQuoteSubmit,subscribeCannel,subscribeDelete} from '@/api/strategy/subscribe'

//import { init,registerIndicator } from 'klinecharts'
export default {
  name: 'faultinessAdmin',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      windowHeight:"800",
      symbolOptions:[],
      symbolList:[],
      list: [
      ],
      total: 0,
      listLoading: false,
      connected:"loading",
      subscribeForm:{
          scale:"15",
          ema:10,
          wma:20,
          fast:18,
          slow:8,
          signal:5,
          trade:2,
          quote:2
      },
      hiddenDepositWrapper:false,
      filterForm: {
        page: 1,
        size: 10,
        symbolID:0,
        trade:0,
        quote:0,
        subscribeStatus: 0,
        sort: '+id'
      }
    }
  },
  created() {
    this.getSymbolList()
    this.getList()
  },
  destroyed(){
  },
  methods: {
    getList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getSubscribeList(_this.filterForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            this.total = response.data.total
            _this.list = [];
            response.data.list.forEach((data,index)=>{
              if(data['trade'] == 2){
                data['trade'] = true
              }else{
                data['trade'] = false
              }
              _this.list.push(data)
            })
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getSymbolList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getSymbolList({
        "page":1,
        "size":100
      }).then((response) => {
        console.log("getSymbolList",response)
          if (response.code === 200) {
            this.symbolOptions = response.data.list
            if(response.data.total > 0){
              _this.filterForm.localSymbol = response.data.list[0]['code']
              _this.getList()
            }
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleResetSubscribe:function(){
      this.subscribeForm = {
          scale:"15",
          ema:10,
          wma:20,
          fast:18,
          slow:8,
          signal:5,
          trade:2,
          quote:2
      }
    },
    handleSubscribeQuoteChange:function(subscribe,allowedTrade){
      let _this = this;
      console.log(subscribe,allowedTrade)
      let _subscribeForm = {
        "subscribeID":subscribe['ID'],
        "quote":0
      }
      if(allowedTrade){
        _subscribeForm['quote'] = 2
      }else{
        _subscribeForm['quote'] = 1
      }
      subscribeQuoteSubmit(_subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      console.log(allowedTrade)
    },
    handleSubscribeTradeChange:function(subscribe,allowedTrade){
      let _this = this;
      console.log(subscribe,allowedTrade)
      let _subscribeForm = {
        "subscribeID":subscribe['ID'],
        "trade":0
      }
      if(allowedTrade){
        _subscribeForm['trade'] = 2
      }else{
        _subscribeForm['trade'] = 1
      }
      subscribeTradeSubmit(_subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      console.log(allowedTrade)
    },
    handleSubscribeChange:function(subscribe){
      this.hiddenDepositWrapper = true
      console.log(subscribe)
      if(subscribe.trade){
        subscribe.trade = 2
      }else{
        subscribe.trade = 1
      }
      if(subscribe.quote){
        subscribe.quote = 2
      }else{
        subscribe.quote = 1
      }
      this.subscribeForm = subscribe

    },
    handleSubscribeRemove:function(subscribe){
      let _this = this;
      subscribeDelete(this.subscribeForm).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleSubscribeCannel:function(subscribe){
      let _this = this;
      subscribeCannel({
        "subscribeID":subscribe.ID
      }).then((response) => {
        console.log("getPolicyList",response)
          if (response.code === 200) {
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleSubscribeSubmit:function(){
      let _this = this;
      subscribeSave(_this.subscribeForm).then((response) => {
          if (response.code === 200) {
            _this.hiddenDepositWrapper = false
            _this.getList()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleDetail:function(item){
      this.$router.push({ path:'/quotation/quotation', query: {"symbol":item.symbol} })
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.filterForm.sort = '+id'
      } else {
        this.filterForm.sort = '-id'
      }
      this.handleFilter()
    }
  }
}
</script>
<style>

</style>